<template>
    <div>
        <!-- 按钮组件 -->
        <el-button
            type="primary"
            icon="el-icon-plus"
            style="margin-bottom: 10px"
            @click="showDialog"
            >添加</el-button
        >

        <!-- 
          表格组件
          data:表格将来将要展示的数据----数组类型
          border:给表格加边框
          column组件
          label设置标题
          width对应列的宽度
          align:标题对齐方式
          注意1：elementUI当中的table组件，展示的数据是以一列一列地展示数据
         -->
        <!-- :data="data" -->
        <el-table style="width: 100%" border :data="list">
            <el-table-column
                prop="prop"
                label="序号"
                width="80px"
                align="center"
                type="index"
            >
            </el-table-column>
            <el-table-column prop="tmName" label="品牌名称" width="width">
            </el-table-column>
            <el-table-column prop="logoUrl" label="品牌LOGO" width="width">
                <template slot-scope="{ row, $index }">
                    <img :src="row.logoUrl" style="width: 100px; height: 100" />
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="width">
                <template slot-scope="{ row, $index }">
                    <el-button
                        type="warning"
                        icon="el-icon-edit"
                        size="mini"
                        @click="updateTradeMark(row)"
                        >修改</el-button
                    >
                    <el-button
                        type="danger"
                        icon="el-icon-edit"
                        size="mini"
                        @click="deleteTradeMark(row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 
            分页器组件
            当前第几页、数据的总条数、每一页展示的数据量、连续页码数
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            current-page:代表的是当前第几页
            total:代表分页器一共需要展示数据的条数
            page-size:每一页展示的数据量
            page-sizes：可以设置每一页展示多少条数据
            layout:可以实现分页器的布局，通过改变里面的属性顺序来改变布局
            pager-count:显示页码按钮的个数，如果是9连续页码是7

         -->
        <el-pagination
            style="margin-top: 20px; text-align: center"
            :current-page.sync="page"
            :total="total"
            :page-size="limit"
            :pager-count="7"
            :page-sizes="[3, 5, 10]"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="prev, pager, next, jumper,->,sizes,total"
            ref="pagination"
        >
        </el-pagination>
        <!-- 对话框组件
            :visible.sync父子组件数据同步 
         -->
        <el-dialog
            :title="tmForm.id ? '修改品牌' : '添加品牌'"
            :visible.sync="dialogFormVisible"
        >
            <!-- form表单 :model属性,这个属性的作用是:把表单的数据收集到哪个对象的身上,表单验证也需要这个属性 
            Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
            并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator
            -->
            <el-form
                :model="tmForm"
                style="width: 80%"
                :rules="rules"
                ref="ruleForm"
            >
                <el-form-item
                    label="品牌名称"
                    label-width="100px"
                    prop="tmName"
                >
                    <el-input
                        autocomplete="off"
                        v-model="tmForm.tmName"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="品牌LOGO"
                    label-width="100px"
                    prop="logoUrl"
                >
                    <!-- 
                        on-success文件上传成功时的钩子
                        before-upload 上传文件之前的钩子，参数为上传的文件，
                            若返回 false 或者返回 Promise 且被 reject，则停止上传。
                     -->
                    <!-- 
                        这里收集数据不能使用v-model,因为不是表单元素
                        action:设置图片上传的地址
                      -->
                    <el-upload
                        class="avatar-uploader"
                        action="/dev-api/admin/product/fileUpload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img
                            v-if="tmForm.logoUrl"
                            :src="tmForm.logoUrl"
                            class="avatar"
                        />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__tip" slot="tip">
                            只能上传jpg/png文件，且不超过500kb
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateTradeMark"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "TradeMark",
    data() {
        var validateTmName = (rule, value, callback) => {
            // 自定义校验规则
            if (value.length < 2 || value.length > 10) {
                callback(new Error("品牌名称需要2-10位"))
            } else {
                callback()
            }
        }
        return {
            // 初始化数据
            page: 1,
            //当前页数展示数据的条数
            limit: 3,
            // 总共数据条数
            total: 0,
            // 列表展示的数组
            list: [],
            // dialog组件是否的bool
            dialogFormVisible: false,
            // 收集品牌信息
            tmForm: {
                logoUrl: "",
                tmName: "",
            },
            // 表单验证规则
            rules: {
                // 品牌名称的验证规则
                tmName: [
                    {
                        required: true,
                        message: "请输入品牌名称",
                        trigger: "blur",
                    },
                    { validator: validateTmName, trigger: "change" },
                ],
                // 品牌的logo验证规则
                logoUrl: [
                    {
                        required: true,
                        message: "请选择品牌的图片",
                    },
                ],
            },
        }
    },
    mounted() {
        // 组件挂载完毕发送请求
        this.getPageList()
    },
    methods: {
        // 获取品牌列表的数据
        async getPageList() {
            const { page, limit } = this
            // 获取品牌列表的接口
            const result = await this.$API.tradeMark.reqTradeMarkList({
                page,
                limit,
            })
            if (result.code == 200) {
                const { current, total, records } = result.data
                this.page = current
                this.total = total
                this.list = records
            }
            // 手动修改分页器当前页数，虽然使用了sync但是当页面为倒数第二页时无效
            this.$refs.pagination.internalCurrentPage = this.page
        },
        // 当前页码发生变化时
        handleCurrentChange(pager) {
            this.page = pager
            this.getPageList()
        },
        // 当分页器某一页需要展示数据条数发生变化的时候会触发
        handleSizeChange(limit) {
            // 整理参数 每页数据显示量
            this.limit = limit
            this.getPageList()
        },
        // 点击添加品牌按钮
        showDialog() {
            // 显示对话框
            this.dialogFormVisible = true
            // 清除数据
            this.tmForm = { tmName: "", logoUrl: "" }
        },
        // 修改某一品牌
        updateTradeMark(row) {
            // 显示对话框
            this.dialogFormVisible = true
            // 将服务器返回的品牌信息,赋值给tmForm
            // tmForm存储的也就是服务器返回的信息
            // 所以需要浅拷贝,只拷贝外面一层引用对象
            this.tmForm = { ...row }
        },
        // 图片上传成功
        handleAvatarSuccess(res, file) {
            // res:上传成功之后返回给前端的数据
            // file:上传成功之后服务器返回前端的数据
            // 收集品牌图片的数据
            this.tmForm.logoUrl = res.data
        },
        // 图片上传之前
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg"
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!")
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!")
            }
            return isJPG && isLt2M
        },
        // 添加按钮(添加品牌|修改品牌)
        addOrUpdateTradeMark() {
            // 当全部表单验证通过，再去编写业务逻辑
            this.$refs.ruleForm.validate(async (valid) => {
                // valid表示验证是否通过
                if (valid) {
                    this.dialogFormVisible = false
                    // 发请求(添加品牌|修改品牌)
                    const result =
                        await this.$API.tradeMark.reqAddOrUpdateTradeMark(
                            this.tmForm
                        )
                    if (result.code == 200) {
                        // 弹出的信息可能是添加品牌成功也可能是修改成功
                        this.$message({
                            message: this.tmForm.id
                                ? "修改品牌成功"
                                : "添加品牌成功",
                            type: "success",
                        })
                        // 处理添加完商品跳转到最后一页的BUG
                        let example = this.total / this.limit
                        if (example !== Math.round(example)) {
                            // 小数的时候向上取整，也就是最后一页
                            example = Math.ceil(example)
                        } else {
                            // 整数代表已经是最后一页并且有三条数据，所以+1跳转到新增的一页比如11（有三条数据） 到 12
                            example += 1
                        }
                        // 如果添加商品停留在最后一页,修改商品停留在当前页
                        // 添加品牌或修改成功后重新获取数据
                        this.handleCurrentChange(
                            this.tmForm.id ? this.page : example
                        )
                    }
                } else {
                    console.log("error submit!!")
                    return false
                }
            })
        },
        // 删除品牌信息
        deleteTradeMark(row) {
            const { id, tmName } = row
            this.$confirm(`您是否要删除${tmName}信息？`, "提示", {
                cancelButtonText: "取消",
                confirmButtonText: "确定",
                type: "warning",
            })
                .then(async () => {
                    const result = await this.$API.tradeMark.reqDeleteTradeMark(
                        id
                    )
                    if (result.code == 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功！",
                        })
                        // 再次发送请求
                        // 判断当前页面数据是否全部删除完了 全部删除跳转到上一页
                        let page =
                            this.list.length > 1 ? this.page : this.page - 1
                        this.handleCurrentChange(page)
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "取消删除！",
                    })
                })
        },
    },
}
/*  */
</script>
          
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>